<template>
  <div class="page-common-layout">
    <div class="page-common-content">
      <tool-bar @search="$refs.table.refresh(true)" @reset="reset">
        <template slot="toolForm">
          <a-form-item :label="$ct('StartTime', '开始时间')">
            <a-range-picker
              style="width: 280px"
              :ranges="{
                今天: [moment(), moment()],
                最近一周: [moment().add(-1, 'W'), moment()],
                最近一个月: [moment().add(-1, 'M'), moment()],
                最近三个月: [moment().add(-3, 'M'), moment()],
              }"
              :placeholder="[
                $ct('StartTime', '开始时间'),
                $ct('EndTime', '结束时间'),
              ]"
              v-model="rangePickerValue"
              @change="startTimeOnChange"
            />
          </a-form-item>
          <a-form-item :label="$ct('workflowBelongingTo', '所属流程')">
            <a-input
              v-model="queryParam.procDefName"
              :placeholder="$ct('workflowBelongingTo', '所属流程')"
              style="width: 100%"
            />
          </a-form-item>
        </template>
      </tool-bar>
      <DataGrid
        ref="table"
        :columns="columns"
        :url="url"
        :queryParam="queryParam"
        rowKey="id"
        showPagination="auto"
        :showRowSelect="false"
      >
        <span slot="renderFlowStatus" slot-scope="{ text, record, index }">
          <a-tag :color="'green'">
            审核完成
          </a-tag>
        </span>
        <span slot="renderAction" slot-scope="{ text, record }">
          <template>
            <a
              @click="handleTransaction(record)"
              v-action:historyProcess_detail
            >
              {{ $ct("detail", "详情") }}
            </a>
            <span class="action-margin"></span>
            <a
              @click="deleteData(record)"
              class="action-delete"
              v-action:historyProcess_delete
            >
              {{ $ct("delete", "删除") }}
            </a>
          </template>
        </span>
      </DataGrid>
      <!-- 详情 -->
      <task-form
        ref="taskModal"
        :visible="taskVisible"
        @cancel="taskHandleCancel()"
        @ok="taskHandleOk"
      />
    </div>
  </div>
</template>

<script>
import { dataGridMixin } from "@/mixins/dataGridMixin";
import { DataGrid } from "@/components";
import taskForm from "./taskView.vue";
import moment from "moment";
export default {
  name: "historyProcess",
  mixins: [dataGridMixin],
  components: {
    DataGrid,
    taskForm,
  },
  data() {
    return {
      columns: [
        {
          title: "流程标题",
          dataIndex: "name",
          width: 230,
          langCode: "workflowTitle",
        },
        {
          title: "所属流程",
          dataIndex: "procDefName",
          langCode: "workflowBelongingTo",
        },
        {
          title: "流程发起人",
          dataIndex: "startUserId",
          langCode: "ProcessInitiator",
        },
        {
          title: "开始时间",
          dataIndex: "startTime",
          sorter: false,
          langCode: "StartTime",
        },
        {
          title: "结束时间",
          dataIndex: "endTime",
          sorter: false,
          langCode: "EndTime",
        },
        {
          title: "流程状态",
          dataIndex: "flowStatus",
          align: "center",
          langCode: "ProcessStatus",
          scopedSlots: {
            customRender: "renderFlowStatus",
          },
        },
        {
          title: "操作",
          dataIndex: "action",
          width: 120,
          align: "center",
          scopedSlots: {
            customRender: "renderAction",
          },
        },
      ],
      visible: false,
      confirmLoading: false,
      mdl: null,
      queryParam: {},
      taskVisible: false,
      url: {
        getPageSet: "/workflow/apiFlowableTask/getMyHistoryPageSet",
      },
      rangePickerValue: null,
    };
  },
  methods: {
    moment,
    // 删除
    deleteData(record) {
      const that = this;
      that.$confirm({
        title: "警告",
        content: `删除后用户已填写的数据将被一并删除且无法恢复， 同时引用该组件的所有流程功能均受影响，是否确定删除！`,
        okText: "确定",
        cancelText: "取消",
        closable: true,
        onOk() {
          // 在这里调用删除接口
          that
            .$post("/workflow/apiFlowableTask/deleteHistoricProcessInstance", {
              instanceId: record.processInstanceId,
            })
            .then((res) => {
              if (res.statusCode === 200) {
                that.$message.success(res.message);
                that.$refs.table.refresh();
                that.ids = "";
              } else {
                that.$message.error(res.message);
              }
            });
        },
        onCancel() {
          console.log("Cancel");
        },
      });
    },
    // 获取流程详情
    handleTransaction(e) {
      const jsonData = "";
      this.$post("/workflow/apiFlowableTask/historyClickDetails", {
        processInstanceId: e.processInstanceId,
        modelKey: e.procDefKey,
        processDefinitionId: e.processDefinitionId,
        businessKey: e.businessKey,
      }).then((res) => {
        if (res.statusCode == 300) {
          this.$message.error(res.message);
        } else {
          const jsonData = res;
          this.$refs.taskModal.loadData(e, jsonData);
          this.taskVisible = true;
        }
      });
    },
    taskHandleOk() {
      this.taskVisible = false;
    },
    taskHandleCancel() {
      this.taskVisible = false;
    },
    startTimeOnChange(date, dateString) {
      this.queryParam.startTime = dateString.toString();
    },
    reset() {
      this.queryParam = {};
      this.rangePickerValue = null;
      this.$refs.table.refresh(true);
    },
  },
};
</script>

<style lang="less"></style>
